<template>
    <div class="largeScreen">
        <div class="my-header">
            <MyTopHeader/>
        </div>
        <div class="my-main">
            <div class="my-left">
                <div class="my-left-top my-left-background">
                    <div class="my-left-top-top">
                        <MyProgressBar/>
                    </div>
                    <div class="my-left-top-bottom">
                        <MyBarGraph/>
                    </div>
                </div>

                <div class="my-left-center my-left-background">
                    <MyScrollBoard/>
                </div>

                <div class="my-left-bottom my-left-background">
                    <!--                    <ScatterDiagram/>-->
                    <MyScatterDiagram2/>
                </div>
            </div>

            <div class="my-center">
                <div class="my-center-top">
                    <div class="my-center-top-main">
                        <MyDigitalFlop/>
                    </div>
                </div>

                <div class="my-center-bottom">
                    <MyAreaMap/>
                </div>
            </div>

            <div class="my-right">
                <div class="my-right-top my-right-background">
                    <MyMyCarousel/>
                </div>

                <div class="my-right-center my-right-background">
                    <MyBrokenLine/>
                </div>

                <div class="my-right-bottom my-right-background">
                    <MyDataMart/>
                </div>
            </div>
        </div>

    </div>
</template>

<script>

// 大屏

import MyProgressBar from "@/views/components/dataView/MyProgressBar.vue";
import MyScrollBoard from "@/views/components/dataView/MyScrollBoard.vue";
import ScatterDiagram from "@/views/components/dataView/ScatterDiagram.vue";
import MyScatterDiagram2 from "@/views/components/dataView/MyScatterDiagram2.vue";
import MyMyCarousel from "@/views/components/dataView/MyMyCarousel.vue";
import MyDataMart from "@/views/components/dataView/MyDataMart.vue";
import MyBrokenLine from "@/views/components/dataView/MyBrokenLine.vue";
import MyDigitalFlop from "@/views/components/dataView/MyDigitalFlop.vue";
import MyBarGraph from "@/views/components/dataView/MyBarGraph.vue";
import MyTopHeader from "@/views/components/dataView/MytopHeader.vue";
import MyAreaMap from "@/views/components/dataView/MyAreaMap.vue";

export default {
    name: 'MyLargeScreen',
    components: {
        MyAreaMap,
        MyTopHeader,
        MyScatterDiagram2,
        ScatterDiagram,
        MyScrollBoard, MyProgressBar, MyMyCarousel, MyDataMart, MyBrokenLine, MyDigitalFlop, MyBarGraph
    },
    data() {
        return {}
    }
}
</script>

<style lang="scss" scoped>
.largeScreen {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    color: #fff;
    background-color: #030409;
    box-sizing: border-box;
    background-image: url('/public/img/slices/bg.png');

    .my-header {
        height: 6%;
        box-sizing: border-box;
        background-image: url('/public/img/slices/title@2x.png');
        background-size: cover; /* 背景图片覆盖整个元素 */
        background-repeat: no-repeat; /* 防止背景图片重复 */
        background-position: center center; /* 背景图片居中 */
    }

    .my-main {
        display: flex;
        width: 100%;
        height: 94%;
        box-sizing: border-box;

        .my-left {
            flex: 1;
            display: flex;
            flex-direction: column;
            height: 100%;
            box-sizing: border-box;
            padding-left: 0.3%;

            .my-left-top {
                flex: 1;
                display: flex;
                flex-direction: column;
                width: 100%;
                height: 100%;
                box-sizing: border-box;
                //border: #1ab394 solid 1px;


                .my-left-top-top {
                    flex: 1;
                    box-sizing: border-box;
                }

                .my-left-top-bottom {
                    flex: 1;
                    box-sizing: border-box;
                }


            }

            .my-left-center {
                flex: 1;
                box-sizing: border-box;
                //border: #77d23e solid 1px;
            }

            .my-left-bottom {
                flex: 1;
                box-sizing: border-box;
            }


        }


        .my-left-background {
            background-image: url('/public/img/slices/left_top@2x.png');
            background-size: 100% 100%; /* 背景图片覆盖整个元素 */
            background-repeat: no-repeat; /* 防止背景图片重复 */
            background-position: center center; /* 背景图片居中 */
        }


        .my-center {
            flex: 2;
            display: flex;
            flex-direction: column;
            height: 100%;
            box-sizing: border-box;
            //border: 1px solid aquamarine;

            .my-center-top {
                flex: 1;
                height: 100%;
                box-sizing: border-box;
                //border: #3e8dd2 solid 1px;
                display: flex;
                align-items: center;
                justify-content: center;

                .my-center-top-main {
                    width: 97%;
                    height: 80%;
                    background-color: rgba(55, 214, 175, 0.1);
                }
            }

            .my-center-bottom {
                flex: 7;
                width: 100%;
                height: 100%;

                background-image: url('/public/img/slices/地球@2x.png');
                background-size: 120% 110%; /* 背景图片覆盖整个元素 */
                background-repeat: no-repeat; /* 防止背景图片重复 */
                background-position: calc(50% + 10%) calc(50% + 45%); /* 水平向右便宜，垂直向上偏移*/
            }

        }

        .my-right {
            flex: 1;
            display: flex;
            flex-direction: column;
            height: 100%;
            box-sizing: border-box;
            padding-right: 0.3%;


            .my-right-top {
                flex: 1;
                box-sizing: border-box;
                //border: #f22477 solid 1px;

            }

            .my-right-center {
                flex: 1;
                box-sizing: border-box;
                //border: #77d23e solid 1px;
            }

            .my-right-bottom {
                flex: 1;
                box-sizing: border-box;
            }

        }

        .my-right-background {
            background-image: url('/public/img/slices/right_top@2x.png');
            background-size: 100% 100%; /* 背景图片覆盖整个元素 */
            background-repeat: no-repeat; /* 防止背景图片重复 */
            background-position: center center; /* 背景图片居中 */
        }
    }

}
</style>
